<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="./bootstrap.css">
    <title>XX管理</title>
    <style>
        .tableStyle {
            width: 980px;
            margin: 0 auto;
            font-size: 14px;
            vertical-align: middle;
        }

        .manageContainer {
            width: 1000px;
            margin: 10px auto;
            padding-top: 15px;
            height: 600px;
            position: relative;
            background-color: rgba(255, 248, 248, 0.5);
            border-radius: 12px;
        }

        .selectStyle {
            width: 100px;
            font-size: 12px;
        }


        .pageManage {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: #ccc;
        }

        .btnStyle {}

        .picStyle {
            width: 120px;
        }
    </style>
</head>

<body>
    <div class="manageContainer">
        <!-- 表格模板 -->
        <table class="table table-hover tableStyle">
            <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">订单号</th>
                    <th scope="col">用户id</th>
                    <th scope="col">用户名</th>
                    <th scope="col">订单状态</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>s00120200911</td>
                    <td>s0011</td>
                    <td>张三</td>
                    <td>
                        <!-- 下拉菜单模板 -->
                        <select class="form-select selectStyle">
                            <option value="1">待付款</option>
                            <option value="2">待收货</option>
                            <option value="3">待评价 </option>
                        </select>
                    </td>
                    <td>
                        <select class="form-select selectStyle">
                            <option value="3">已付款</option>
                            <option value="1">已发货</option>
                            <option value="2">已评价</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>s00120200912</td>
                    <td>s0011</td>
                    <td>张三</td>
                    <td>
                        <select class="form-select selectStyle">
                            <option value="1">待付款</option>
                            <option value="2">待收货</option>
                            <option value="3">待评价 </option>
                        </select>
                    </td>
                    <td>
                        <select class="form-select selectStyle">
                            <option value="3">已付款</option>
                            <option value="1">已发货</option>
                            <option value="2">已评价</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>s00120200913</td>
                    <td>s0012</td>
                    <td>李四</td>
                    <td>
                        <select class="form-select selectStyle">
                            <option value="1">待付款</option>
                            <option value="2">待收货</option>
                            <option value="3">待评价 </option>
                        </select>
                    </td>
                    <td>
                        <select class="form-select selectStyle">
                            <option value="3">已付款</option>
                            <option value="1">已发货</option>
                            <option value="2">已评价</option>
                        </select>
                    </td>
                </tr>

            </tbody>
        </table>

        <!-- 分页模板 -->
        <nav class="pageManage">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link">Previous</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item " aria-current="page">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 按钮模板 -->
    <button type="button" class="btn btn-outline-secondary btnStyle">删除所有</button>
    <!-- 图片 -->
    <img src="../images/kdy3.jpg" class="img-thumbnail picStyle" alt="...">
    <!-- 选择框 -->
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
        <!-- <label class="form-check-label" for="flexCheckChecked">
            Checked checkbox
        </label> -->
    </div>

    <!-- <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                    Accordion Item #1
                </button>
            </h2>
            <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
                    <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                    Accordion Item #2
                </button>
            </h2>
            <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
                    <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this
                    being filled with some actual content.</div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                    data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                    Accordion Item #3
                </button>
            </h2>
            <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
                data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the
                    <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting
                    happening here in terms of content, but just filling up the space to make it look, at least at first
                    glance, a bit more representative of how this would look in a real-world application.</div>
            </div>
        </div>
    </div> -->
</body>

</html>